/* global TMap */
import React, { useEffect, useState } from 'react'
import styles from '../index.module.less';

export default function Map(props) {
    const [map, setMap] = useState();
    useEffect(() => {
        initMap();
    }, []);

    function initLayer(map) {
        const paths = props.coordinates.map(item => {
            return [item[1], item[0]];
        });
        // console.log(paths);
        var area = new TMap.visualization.Area().setData([{path: paths.flat(1)}]).addTo(map);
    }

    function initMap() {
        const map = new TMap.Map(document.getElementById('tmap'), {
            center: new TMap.LatLng(39.916527,116.397128),
            zoom: 8
        });
        setMap(map);
        initLayer(map);
    }
    return (
        <div id="tmap" className={styles.tmap}></div>
    )
}
